<template>
  <Card @submit="add"></Card>
  <Table :list="list"></Table>
</template>

<script setup>
  import {ref } from 'vue'
  const list = ref([
    {
      id:'1', // 当前学习的唯一id
      subject: 'Vue.js', // 学习科目
      content: '学习指令，如v-if', // 学习内容
      place: '自习室', // 学习地点
      status: false // 学习状态，false表示未学习，true表示已学习
    }
  ])
  // 表格删除功能
  const remove = (id, status) => {
    // 如果status是true则可以删除，如果不是则提醒用户先完成学习！
    if(status) {
      list.value = list.value.filter(item => item.id !== id);
    } else {
      alert('请先完成学习')
    }
  }
  const add = () => {
    if(subject.value === '') {
      alert('请输入学习科目')
      return;
    }
    // 获取最大值后加1，做为下一个id
    nextId.value = Math.max(...list.value.map(item => item.id)) + 1
    const obj = {
      id:nextId.value, // 当前学习的唯一id
      subject: subject.value, // 学习科目
      content: content.value, // 学习内容
      place: selectOption.value, // 学习地点
      status: false // 学习状态，false表示未学习，true表示已学习
    }
    list.value.push(obj) //将构建好的数据推送到数组中

  }
</script>